<template>
  <view class="my">
   <view class="avatar-wrapper">
     <img class="avatar liti" src="http://8.130.37.134/api1/image/get/avatar.png" alt="用户头像" />
   </view>
   <view class="name-wrapper">{{userInfoForm.username}}</view>
    <van-cell-group>
      <van-cell title="个人资料" is-link @click="showUserInfoPopup=true" />
      <van-cell title="联系客服" is-link @click="showContactInfoPopup=true" />
    </van-cell-group>
    
    <van-button type="warning" class="logout-btn" @click="logout">退出登录</van-button>
    
    <van-dialog v-model:show="showUserInfoPopup" title="账号详情" show-cancel-button @confirm="updateUserInfo()">
      <view >
		  <van-form  @submit="onsubmit">
        <van-cell-group inset>
          <van-field
            v-model="userInfoForm.username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="accountRules"
          />
          <van-field
            v-model="userInfoForm.password"
            name="密码"
            label="登录密码"
            placeholder="密码"
            :rules="passwordRules"
          />
         
        </van-cell-group>
		</van-form>
      </view>
    </van-dialog>

    <van-dialog v-model:show="showContactInfoPopup" title="联系客服" show-cancel-button >
      <view >
        <view class="popup-content" >客服微信号：DingDangC000</view>
		<view class="popup-content" ><img src="http://8.130.37.134/api1/image/get/kefuwx.png" alt="客服二维码" /></view>	
      </view>
    </van-dialog>
  </view>
</template>

<script setup>
import { NavBar, CellGroup, Cell, Button, Dialog ,Field,Form, Toast } from 'vant';
import {ref,onMounted} from 'vue'
import {getUserInfoApi,updateUserInfoApi} from '../../apis/userApi.js'

const showUserInfoPopup = ref(false);
const showContactInfoPopup = ref(false);

const userInfoForm=ref({
	username:'',
	password:'',
	createTime:''
})

//账号格式校验规则
const accountRules = [
  { required: true, message: '请输入账号' },
  {
    pattern: /^.{0,16}$/,
    message: '账号不能超过16个字符'
  }
]
//密码格式校验规则
const passwordRules = [
  { required: true, message: '请输入密码' },
  {
    pattern: /^\w{6,16}$/,
    message: '密码需6-16个字符'
  }
]


//获取用户信息
async function getUserInfo(){
	const res=await getUserInfoApi()
	userInfoForm.value.username=res.data.username
	userInfoForm.value.password=res.data.password
	
}
//修改用户信息
async function updateUserInfo(){
	const res=await updateUserInfoApi(userInfoForm.value)
	if(res.code===0){
		Toast("保存成功！")
	}
	
}

const logout = () => {
  Dialog.confirm({
    title: '退出登录',
    message: '确定要退出登录吗？',
  }).then(() => {
    // 清除信息
	uni.removeStorageSync('userInfo')
    uni.navigateTo({
      url: '/pages/login/login'
    });

  });
};

onMounted(()=>{
  getUserInfo()
})
</script>

<style scoped>
/* 这里可以添加样式 */
.my {
  padding-top: 50px;
}

.avatar-wrapper {
  text-align: center;
  margin-top: 20px;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  
}
.liti{
	box-shadow: 0px 0px 3px 0px black;
}
.name-wrapper{
	display: flex;
	justify-content: center;
}
.logout-btn {
  margin: 20rpx  0 ;
  width: 100%;
 background-color:#d70004; 
}

.popup-content {
  display: flex;justify-content: center;
  font-size: 20rpx;
}

.popup-content img {
  width: 200px;
  height: 200px;
  margin-top: 10px;
}
</style>
